<template>
  <view class="account-container">
    <view class="user_info_wrap">
      <view v-if="userinfo.userName" class="user_img_wrap">
        <image class="user_bg"></image>
        <view class="user_info">
          <image
            class="user_icon"
            :src="
              userinfo.url
                ? userinfo.url
                : 'https://p.qqan.com/up/2021-2/16137992359659254.jpg'
            "
            @error="imgError(userinfo)"
          ></image>
          <view class="user_name">{{ userinfo.userName }}</view>
        </view>
      </view>
      <view v-else class="user_btn">
        <u-button class="loginBtn" @click="loginFunc">点击登入</u-button>
      </view>
    </view>
    <!-- 我的服务 -->
    <view class="user_content">
      <view class="user_main">
        <view class="orders_wrap">
          <view class="orders_title">我的服务</view>
          <view class="order_content">
            <navigator url="/pages/LCX/Orders/Orders">
              <image
                src="http://ww1.sinaimg.cn/large/005NUwyggy1gtkuf91m14j60290290sk02.jpg"
                mode="scaleToFill"
                lazy-load="false"
                class="serviceImg"
              >
              </image>
              <view class="order_name">我的订单</view>
            </navigator>
            <navigator url="/pages/LCX/Collections/Collections">
              <image
                src="http://ww1.sinaimg.cn/large/005NUwyggy1gtkujw2x5gj6029029q2r02.jpg"
                mode="scaleToFill"
                lazy-load="false"
                class="serviceImg"
              >
              </image>
              <view class="order_name">我的收藏</view>
            </navigator>
            <!-- <navigator url="/pages/LCX/Report/Report">
              <image
                src="http://ww1.sinaimg.cn/large/005NUwyggy1gtkulmkyk4j602902974402.jpg"
                mode="scaleToFill"
                lazy-load="false"
                class="serviceImg"
              >
              </image>
              <view class="order_name">我的报告</view>
            </navigator> -->
            <!-- <navigator>
              <image
                src="http://ww1.sinaimg.cn/large/005NUwyggy1gtkum2a0xmj6029029glh02.jpg"
                mode="scaleToFill"
                lazy-load="false"
                class="serviceImg"
              >
              </image>
              <view class="order_name">咨询订单</view>
            </navigator> -->
          </view>
        </view>
      </view>
    </view>
    <!-- 常见工具 -->
    <view class="service_content">
      <view class="user_main">
        <view class="orders_wrap">
          <view class="orders_title">常见工具</view>
          <view class="order_content">
            <u-cell-group class="choose">
              <u-cell-item
                @click="morePage"
                icon="kefu-ermai"
                title="更多问题"
                arrow-direction="right"
                :arrow="true"
              ></u-cell-item>
              <u-cell-item
                @click="aboutUs"
                icon="man-add"
                title="了解我们"
                arrow-direction="right"
                :arrow="true"
              ></u-cell-item>
            </u-cell-group>
            <view v-if="userinfo.userName" class="user_img_wrap">
              <u-button class="logoutBtn" @click="logOut">退出</u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultImg: "https://p.qqan.com/up/2021-2/16137992359659254.jpg",
      userinfo: {
        // avatarUrl: "https://p.qqan.com/up/2021-2/16137992359659254.jpg",
        // nickName: "体检用户",
        // test: false,
      },
    };
  },
  onShow: function () {
    console.log("App Show");
    let that = this;
    uni.getStorage({
      key: "userInfo",
      success: function (res) {
        console.log(res.data);
        // this.setData({ userinfo: res.data });
        that.userinfo = res.data;
      },
    });
  },
  mounted() {},
  methods: {
    imgError(userinfo) {
      // item.img = require("../../assets/img-default.png");
      userinfo.url = this.defaultImg;
    },
    logOut() {
      let that = this;
      uni.removeStorage({
        key: "userInfo",
        success: function (res) {
          console.log("success");
          that.userinfo = {};
          that.logOutSuccess();
        },
      });
    },
    loginFunc() {
      console.log("click login");
      uni.navigateTo({
        url: "/pages/Login/Login",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    aboutUs() {
      uni.navigateTo({
        url: "/pages/LCX/AboutUs/AboutUs",
      });
    },
    morePage() {
      uni.navigateTo({
        url: "/pages/LCX/More/More",
      });
    },
    logOutSuccess() {
      this.$refs.uToast.show({
        title: "退出成功",
        type: "success",
        // url: "/pages/Mine/Mine",
      });
    },
  },
};
</script>

<style scoped lang="less">
.account-container {
  .user_info_wrap {
    height: 35vh;
    overflow: hidden;
    //   background-color: var(--themeColor);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .user_img_wrap {
      position: relative;
      // .user_bg {
      //   height: 50vh;
      //   // 高斯模糊
      //   filter: blur(10rpx);
      // }
      // border: 1px solid #000;
      .user_info {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 20%;
        text-align: center;
        .user_icon {
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
          //   border: 1px solid #000;
        }
        .user_name {
          color: #000;
          margin-top: 40rpx;
          // font-size: 40rpx;
        }
      }
    }
    .user_btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .user_content {
    position: relative;
    .user_main {
      padding-bottom: 100rpx;
      color: #000;
      position: absolute;
      width: 90%;
      left: 50%;
      transform: translateX(-50%);
      top: -40rpx;
      .orders_wrap {
        background-color: #fff;
        .serviceImg {
          width: 70rpx;
          height: 70rpx;
        }
        .orders_title {
          padding: 20rpx;
          border-bottom: 1rpx solid #ccc;
          font-size: 40rpx;
          font-weight: 500;
        }
        .order_content {
          display: flex;
          margin-top: 20rpx;

          navigator {
            padding: 15rpx 0;
            flex: 1;
            text-align: center;
            .iconfont {
              font-size: 40rpx;
              margin-bottom: 20rpx;
            }
            .order_name {
              color: #ccc;
              font-size: 25rpx;
              margin-top: 10rpx;
            }
          }
        }
      }
    }
  }

  .service_content {
    position: relative;
    top: 300rpx;
    .user_main {
      padding-bottom: 100rpx;
      color: #000;
      position: absolute;
      width: 90%;
      left: 50%;
      transform: translateX(-50%);
      top: -40rpx;
      .orders_wrap {
        background-color: #fff;
        .serviceImg {
          width: 70rpx;
          height: 70rpx;
        }
        .orders_title {
          padding: 20rpx;
          // border-bottom: 1rpx solid #ccc;
          font-size: 40rpx;
          font-weight: 500;
        }
        .order_content {
          display: flex;
          margin-top: 20rpx;
          // flex-flow: row wrap;
          justify-content: space-around;
          flex-direction: column;

          .choose {
            flex: 1;
          }
          navigator {
            flex: 0 0 25%;
            padding: 15rpx 0;
            text-align: center;
            margin-top: 15rpx;

            .iconfont {
              font-size: 40rpx;
              margin-bottom: 20rpx;
            }
            .order_name {
              color: #ccc;
              font-size: 25rpx;
              margin-top: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
